<template>
  <absolute-container class="p-[20px]">
    <page-main
      class="flex h-full flex-col rounded-[4px] bg-[#fff] px-[16px] pb-0 pt-[16px]"
      style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)"
    >
      <QueryForm ref="refQueryForm" :getDataList="getDataList" @addDetailDrawer="addDetailDrawer"></QueryForm>

      <el-table height="100%" :data="dataList">
        <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
        <el-table-column :prop="PROPS.superiorDepartmentTable" :label="LABELS.superiorDepartment" min-width="180" />
        <el-table-column :prop="PROPS.departmentName" :label="LABELS.departmentName" min-width="180" />

        <el-table-column :prop="PROPS.contacts" :label="LABELS.contacts" min-width="180" />
        <el-table-column :prop="PROPS.phoneNumber" :label="LABELS.phoneNumber" min-width="180" />
        <el-table-column :prop="PROPS.createPeople" :label="LABELS.createPeople" min-width="180" />
        <el-table-column :prop="PROPS.createdAt" :label="LABELS.createdAt" min-width="180" />
        <el-table-column :prop="PROPS.status" :label="LABELS.status" min-width="180">
          <template #default="{ row }">
            <div class="flex items-center justify-start">
              <div
                v-if="$store.state.data.KV_MAP[OPTION_KEYS.status][row[PROPS.status]]"
                class="mr-[8px] h-[6px] w-[6px] flex-shrink-0"
                style="border-radius: 50%"
                :class="[row[PROPS.status] == 'ENABLE' ? 'bg-[#1D7FF2]' : 'bg-[#ed7b2f]']"
              ></div>
              {{ $store.state.data.KV_MAP[OPTION_KEYS.status][row[PROPS.status]] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" fixed="right" width="140">
          <template #default="{ row }">
            <div>
              <span class="cursor-pointer text-[#1D7FF2]" @click="onEdit(row)">编辑</span>
              <span
                v-if="row[PROPS.status] == 'DISABLE'"
                class="ml-[12px] cursor-pointer text-[#1D7FF2]"
                @click="handleCommand({ type: 'enableAccount', value: row })"
                >启用</span
              >
              <span
                v-if="row[PROPS.status] == 'ENABLE'"
                class="ml-[12px] cursor-pointer text-[#1D7FF2]"
                @click="handleCommand({ type: 'freeAccount', value: row })"
                >禁用</span
              >
              <span
                v-if="row.parentId"
                class="color-danger ml-[12px] cursor-pointer"
                @click="handleCommand({ type: 'del', value: row })"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
      <div class="addShadow relative -left-[16px] -top-[1px] z-50 w-[calc(100%+32px)]">
        <el-pagination
          :current-page="pagination.page"
          :total="pagination.total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </page-main>

    <DetailDrawer :id="id" v-model="drawerVisible" :title="title" @onSubmit="onSubmit" />
  </absolute-container>
</template>

<script>
import config from "./config";
import QueryForm from "./components/QueryForm.vue";
import DetailDrawer from "./components/DetailDrawer.vue";
import tableMixin from "@/mixin/table";
import paginationMixin from "@/mixin/pagination";
import {
  systemDepartmentAdd,
  systemDepartmentDelete,
  systemDepartmentList,
  systemDepartmentUpdate,
  systemDepartmentUpdateDepartmentStatus,
} from "@/api/department";

export default {
  name: "DepMgmt",
  components: { DetailDrawer, QueryForm },
  mixins: [paginationMixin, tableMixin],
  data() {
    return {
      ...config,
      id: "",
      dataList: [],
      drawerVisible: false,
      title: "新增",
    };
  },
  computed: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList(param) {
      systemDepartmentList(this.getParams(param)).then((res) => {
        console.log(res);
        this.dataList = res.content;
        this.pagination.total = res.totalElements;
      });
    },
    handleCommand(command) {
      const { type, value } = command;
      const obj = {
        freeAccount: () => {
          this.updateBatchTenantUsers(value);
        },
        enableAccount: () => {
          this.enableAccount(value);
        },
        del: () => {
          this.onDel(value);
        },
      };
      obj[type]();
    },
    async onDel(row) {
      try {
        await this.$confirm(`确定删除「${row["name"]}」吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        try {
          await systemDepartmentDelete({ id: row.id });
          this.onFinsh();
        } catch (e) {
          //no-op
        }
      } catch {
        this.$message.warning("已取消删除");
      }
    },
    async updateBatchTenantUsers(list) {
      console.log(list);
      this.$confirm(`确认要禁用「${list[this.PROPS.departmentName]}」吗？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          await systemDepartmentUpdateDepartmentStatus({ id: list.id, status: "DISABLE" });
          await this.getDataList();
          this.$message.success({
            message: "操作成功",
          });
        })
        .catch(() => {});
    },
    async enableAccount(list) {
      console.log(list);
      this.$confirm(`确认要启用「${list[this.PROPS.departmentName]}」吗？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          await systemDepartmentUpdateDepartmentStatus({ id: list.id, status: "ENABLE" });
          await this.getDataList();
          this.$message.success({
            message: "操作成功",
          });
        })
        .catch(() => {});
    },
    addDetailDrawer() {
      this.title = "新增";
      this.drawerVisible = true;
    },
    onEdit(row) {
      this.title = "编辑";
      this.id = row.id;
      this.drawerVisible = true;
    },
    async onSubmit(value) {
      if (this.title == "编辑") {
        //编辑
        await systemDepartmentUpdate(value);
      } else {
        //新增
        await systemDepartmentAdd(value);
      }
      this.onFinsh(this.nodeId);
    },
    onFinsh(value) {
      //value有值代表需要重置分页参数
      this.$message.success({
        message: "操作成功",
      });
      this.getDataList(value);
      this.drawerVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.addShadow {
  display: inline-flex;
  justify-content: flex-end;
  height: 68px;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 0.08);
}
</style>
